<template>
    <div class="card container informat_info" v-for="a_informant in informant" :key="a_informant.id" @click="to_chating(a_informant.id)">
        <div class="card-body">
            <span class="message_img"><img :src="a_informant.user_photo" alt="" style="width: 44px;"></span>
            <span class="message_username" style="font-weight: bolder;">{{ a_informant.user_username }}</span>
            <span class="message_content">{{ a_informant.content }}</span>
            <span class="message_time" style="float: right;">{{ a_informant.chating_time }}</span>
        </div>
    </div>
</template>

<script>  
import { useStore } from 'vuex';   
import { ref, onMounted, onBeforeUnmount } from 'vue';  
import { useRouter } from 'vue-router';

export default {  
    name: "RecentNewsView",  
    setup() {  
        const store = useStore();  
        const recent_news = ref([]);  
        const informant = ref([]);  
        const router = useRouter();
        const ws = new WebSocket('ws://47.121.28.202:8000/ws/chatingsocket/');  

        const fetchRecentNews = async () => {  
            try {  
                const response = await fetch("http://47.121.28.202:8000/settings/recent_news", {  
                    method: "GET",  
                    headers: {  
                        'Authorization': "Bearer " + store.state.user.access,  
                    }  
                });  
                const resp = await response.json();  
                // 过滤掉 user_id 为 7 的项  
                recent_news.value = resp.filter(item => item.user_id !== 7);  
                updateInformant();  
            } catch (error) {  
                console.error("获取近期新闻时出错:", error);  
            }  
        };  

        const updateInformant = () => {  
            const uniqueUsers = new Map();  
            recent_news.value.forEach(item => {  
                // 确保每个用户按聊天时间唯一  
                if (!uniqueUsers.has(item.user_id) || uniqueUsers.get(item.user_id).chating_time < item.chating_time) {  
                    uniqueUsers.set(item.user_id, item);  
                }  
            });  
            informant.value = Array.from(uniqueUsers.values());  
        };  

        ws.onmessage = async () => {  
            await fetchRecentNews();  
        };  

        onMounted(() => {  
            fetchRecentNews();  
        });  

        onBeforeUnmount(() => {  
            ws.close(); // 在组件销毁时关闭 WebSocket  
        });  

        const to_chating = (user_id) => {
            if (store.state.user.is_login) {
                router.push({
                    name: 'contact',
                    params: {
                        userid: user_id,
                    }
                })
            } else {
                router.push({
                    name: 'login',
                })
            }
        }

        return {  
            informant,
            to_chating
        };  
    }  
}  
</script>  

<style scoped>
.informat_info {
    margin-bottom: 10px;
}
.card-body > span {
    margin-right: 10px;
}
</style>